bubbleのアプリにHasura Cloudを接続してGraphQLでデータを追加してみる
以前の記事ではHasura Cloudを接続してbubble上でデータの表示を行いました。
今回はデータを追加してみたいと思います。
GraphQLではデータの作成や更新・削除などの処理はMutationと呼ばれる形で定義されます
やってみる
シンプルに入力フォームを用意し、入力された値を保存できるようにしてみます。
HasuraでMutationを定義
Hasuraプロジェクトにログインし、APIタブをクリックし、エディタに記述します。
mutation insertMemo {
insert_memo(
objects: [
{
content: "Something happened in HP",
}
]
) {
returning {
id
content
}
}
}
contentというフィールドにデータを追加する例です。
実行して追加されると、returningを定義していたので、idとcontentが結果として返ってきていることがわかります。
ただし今回は
入力された値を追加したいので、Mutationのobjectsに定義する値は動的です。
mutation insertMemo($insert_content: String) {
insert_memo_one(
object: {
content: $insert_content
}
) {
id
content
}
}
上記のように変数を使用して定義することが可能です。
hasuraのエディタにクエリ変数を指定できる箇所があるため、そこにjson形式で入力して動作確認が可能です。
クエリ変数例
{
"insert_content": "【マッチハイライト公開】明治安田生命J1リーグ第33節"
}
HasuraにREST APIを作成
bubbleからはAPI Connectorを使ってREST APIにアクセスできるので、hasuraの方でもRESTを作成します。
前回の記事と同じように作成しましょう。
POSTリクエストのみを許可したREST APIを作成しました。
bubbleに入力フォームを追加
bubbleアプリのDesignタブをクリックし、Group要素を追加し、その中にInput要素とButton要素を追加します。
Input要素に入力された内容を保存するため、workflowでHasuraに保存できるようにしていきます
API Connector pluginにAPIを追加
API Connectorに先ほど作成したHasuraのREST APIに接続する設定を追加します。
APIの追加は前回の記事を参照してください。
workflow内で使用するため、Use asはActionにすることが重要です。
パラメーターには、先ほど設定したクエリ変数 と同じkeyを使います。
{"insert_content": "<content>"}
Privateのチェックは外しておきます （dynamic dataを使うため）
設定したら、initialize call を押して以下のような画面になれば設定はOKです。
Saveを押して完了です。
workflowの作成
このworkflowからhasuraに作成したREST APIにアクセスしてデータを追加します。
まずはDesign画面で、入力フォームのGroupのType of content を API Connectorで追加したAPI名に設定します。
その後、送信ボタンのworkflowを追加していきます。
actionの追加で、Pluginを選択すると、API Connectorで追加したAPIが表示されるので、それを選択します。
content に Designで追加したmemoのテキスト要素の値をdynamic dataとして設定します。
確認
プレビュー画面で動作を確認します。
何か入力して送信ボタンを押すと、
ページリダイレクトされました。データを見ると、先ほど入力したものが表示されていました。
hasuraの方でデータを確認したところ、ちゃんと追加されています。
最後に
bubbleからHasuraで作成したREST APIを呼び出してデータを追加してみました。
比較的単純なデータ追加だけ行いましたが、特別難しいことはなくできます。
実際のサービスだとデータ追加の時になんらかの処理を挟むことが多いと思います(hasuraでいうビジネスロジックの挿入のこと)。
この辺りは次回以降の記事で試してみようと思います。
